<template>
	<view class="g-cell" :class="{ 'required': required, 'borderdash': borderdash, 'hairline--bottom': !borderless && !borderdash }" :style="[customStyle]" @click="onClick">
		<view class="cell-main" :class="{ 'center': center }">
			<text v-if="circle" class="circle-icon" :style="{'backgroundColor': circle}"></text>
			<text v-if="icon" :class="icon" class="cell-left-icon"></text>
			<view class="cell-left-icon" v-else-if="$slots.icon">
				<slot name="icon"></slot>
			</view>
			<view class="cell-title" :style="[titleStyle]">
				<view class="cell-title__title" v-if="title">{{ title }}</view>
				<slot v-else name="title"></slot>
				
				<view class="cell-title__label" v-if="label || useLabelSlot">
					<slot v-if="useLabelSlot" name="label"></slot>
					<block v-else-if="label">{{ label }}</block>
				</view>
			</view>
				
			<view class="cell-value" :class="{'number': valueNumber}" :style="valueAlign ? `text-align: ${valueAlign}` : ''">
				<view v-if="value" class="cell-value__value" :style="valueColor ? `color: ${valueColor}` : ''">{{ value }}</view>
				<slot v-else></slot>
				
				<view class="cell-value__label" v-if="valueLabel || useValueLabelSlot">
					<slot v-if="useValueLabelSlot" name="valueLabel"></slot>
					<block v-else-if="valueLabel">{{ valueLabel }}</block>
				</view>
			</view>
			
			<u-icon v-if="rightIcon || isLink" :class="rightIcon || 'jicon-more'" name="arrow-right" color="#999"></u-icon>
			<slot v-else name="rightIcon"></slot>
		</view>
		
		<slot name="extra"></slot>
	</view>
</template>

<script>
	export default {
		name: 'cellItem',
		data() {
			return {
				useLabelSlot: false,
				useValueLabelSlot: false,
				useRightIconSlot: false
			}
		},
		props: {
			center: Boolean,
			required: Boolean,
			borderless: Boolean,
			url: String,
			icon: String,
			titleWidth: String,
			title: [String, Number],
			label: [String, Number],
			value: [String, Number],
			valueAlign: String,
			valueColor: String,
			valueLabel: String,
			rightIcon: String,
			isLink: Boolean,
			titleColor: String,
			cellStyle: Object,
			valueNumber: Boolean,
			circle: String,
			borderdash: Boolean
		},
		computed: {
			customStyle() {
				let style = {}
				if (this.rightIcon || this.isLink || this.useRightIconSlot) {
					style['padding-right'] = '8px'
				}
				if (this.cellStyle) {
					style = Object.assign(style, this.cellStyle)
				}
				return style
			},
			titleStyle() {
				let style = {}
				if (this.titleWidth) {
					style = {
						'max-width': this.titleWidth,
						'min-width': this.titleWidth
					}
				}
				if(this.titleColor) {
					style.color = this.titleColor
				}
				return style
			}
		},
		mounted() {
			if (this.$slots.label) {
				this.useLabelSlot = true
			}
			if (this.$slots.valueLabel) {
				this.useValueLabelSlot = true
			}
			if (this.$slots.rightIcon) {
				this.useRightIconSlot = true
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
				this.$f.openUrl(this.url)
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.g-cell {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 16px 10px 10px;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		&.borderdash {
			border-bottom: 1px dashed #eee;
		}
		&.required::before {
			position: absolute;
			left: 0;
			color: #ee0a24;
			font-size: 14px;
			content: '*';
		}
		.cell-main {
			display: flex;
			&.center {
				align-items: center;
			}
			.circle-icon {
				width: 14px;
				height: 14px;
				display: block;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.cell-right-icon,
			.cell-left-icon {
				min-width: 1em;
				// height: 24px;
				font-size: 18px;
				line-height: 24px;
				vertical-align: middle;
			}
			.cell-left-icon {
				margin-right: 5px;
			}
			.cell-right-icon {
				margin-left: 5px;
				color: #969799;
			}
			.cell-title,
			.cell-value {
				flex: 1;
				width: 0;
			}
			.cell-value {
				text-align: right;
				color: #858688;
				&.number {
					font-family: 'DIN';
					font-size: 32rpx;
				}
			}
			.cell-title:empty,
			.cell-value:empty {
				display: none;
			}
			.cell-title__label,
			.cell-value__label {
				color: #969799;
				font-size: 12px;
				line-height: 18px;
			}
		}
	}
</style>
